<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .Charts {
            margin: 0 auto;
            background-color: #f9f9f9;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: end;
            -webkit-align-items: flex-end;
            -ms-flex-align: end;
            align-items: flex-end;
            padding: 50px;
        }
        .Charts.horizontal {
            display: block;
        }
        .Charts.horizontal .Charts--serie {
            display: block;
            margin: 0 0 30px 0;
            border: 0;
        }
        .Charts.horizontal .Charts--serie label {
            position: relative;
            top: auto;
            right: auto;
            left: 0;
            bottom: auto;
            padding: 0 0 10px 0;
        }
        .Charts--serie {
            height: 100%;
            margin: 0 30px 0 0;
            display: inline-block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: end;
            -webkit-align-items: flex-end;
            -ms-flex-align: end;
            align-items: flex-end;
            -webkit-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-animation: slideUp 0.6s;
            animation: slideUp 0.6s;
            position: relative;
            border-bottom: 1px solid #c2c2c2;
        }
        .Charts--serie.stacked {
            display: block;
        }
        .Charts--serie label {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -20px;
            font-family: Helvetica, sans-serif;
            font-size: 10px;
            text-align: center;
            color: #808080;
        }
        .Charts.horizontal .Charts--item {
            display: block;
            border-radius: 0 2px 2px 0;
            margin: 0 0 5px 0;
            height: 1em;
        }
        .Charts.horizontal .Charts--item b {
            position: absolute;
            right: -20px;
            top: 0.3em;
        }
        .Charts--item {
            background-color: #43a19e;
            display: inline-block;
            margin: 0 5px 0 0;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-transition: height 1s ease-out, width 1s ease-out;
            transition: height 1s ease-out, width 1s ease-out;
            position: relative;
            text-align: center;
            border-radius: 2px 2px 0 0;
        }
        .Charts--item.layered {
            position: absolute;
            left: 5%;
            right: 5%;
            bottom: 0;
            margin: 0;
        }
        .Charts--item.layered b {
            position: absolute;
            right: 0;
        }
        .Charts--item.stacked {
            position: relative;
            display: block;
            border-radius: 0;
        }
        .Charts--item b {
            position: relative;
            font-family: Helvetica, sans-serif;
            font-size: 10px;
            top: -20px;
            color: #43a19e;
        }
        .Legend--color {
            display: inline-block;
            vertical-align: middle;
            border-radius: 2px;
            width: 16px;
            height: 16px;
        }
        .Legend--label {
            display: inline-block;
            vertical-align: middle;
            font-family: Helvetica, sans-serif;
            font-size: 12px;
            margin: 0 0 0 5px;
        }
        @-webkit-keyframes slideUp {
            from {
                -webkit-transform: scaleY(0);
                transform: scaleY(0);
            }
            to {
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }
        }
        @keyframes slideUp {
            from {
                -webkit-transform: scaleY(0);
                transform: scaleY(0);
            }
            to {
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }
        }
    </style>
</head>
<body>
<!--
	Just a simple bar chart react component, mostly customizable via css.
	This is WIP and probably full of bugs
-->
<div id="charts"></div>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>
</body>
</html>

<script>
    'use strict';

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

    function compareNumbers(a, b) {
        return a - b;
    }

    var App = React.createClass({
        displayName: 'App',

        getInitialState: function getInitialState() {
            return {
                data: [],
                series: ['France', 'Italy', 'England', 'Sweden', 'Germany'],
                labels: ['cats', 'dogs', 'horses', 'ducks', 'cows'],
                colors: ['#43A19E', '#7B43A1', '#F2317A', '#FF9824', '#58CF6C']
            };
        },
        componentDidMount: function componentDidMount() {
            this.populateArray();
            setInterval(this.populateArray, 2000);
        },
        populateArray: function populateArray() {
            var data = [],
                    series = 5,
            //getRandomInt(2, 10),
                    serieLength = 5; //getRandomInt(2, 10);

            for (var i = series; i--;) {
                var tmp = [];

                for (var j = serieLength; j--;) {
                    tmp.push(getRandomInt(0, 20));
                }

                data.push(tmp);
            }

            this.setState({
                data: data
            });
        },
        render: function render() {
            return React.createElement(
                    'section',
                    null,
                    React.createElement(Charts, {
                        data: this.state.data,
                        labels: this.state.series,
                        colors: this.state.colors,
                        height: 250
                    }),
                    React.createElement(Charts, {
                        data: this.state.data,
                        labels: this.state.series,
                        colors: this.state.colors,
                        height: 250,
                        opaque: true,
                        grouping: 'stacked'
                    }),
                    React.createElement(Charts, {
                        data: this.state.data,
                        labels: this.state.series,
                        colors: this.state.colors,
                        height: 250,
                        grouping: 'layered'
                    }),
                    React.createElement(Charts, {
                        data: this.state.data,
                        labels: this.state.series,
                        colors: this.state.colors,
                        horizontal: true
                    }),
                    React.createElement(Legend, {
                        labels: this.state.labels,
                        colors: this.state.colors
                    })
            );
        }
    });

    var Legend = React.createClass({
        displayName: 'Legend',

        render: function render() {
            var labels = this.props.labels,
                    colors = this.props.colors;

            return React.createElement(
                    'div', {
                        className: 'Legend'
                    },
                    labels.map(function(label, labelIndex) {
                        return React.createElement(
                                'div',
                                null,
                                React.createElement('span', {
                                    className: 'Legend--color',
                                    style: {
                                        backgroundColor: colors[labelIndex % colors.length]
                                    }
                                }),
                                React.createElement(
                                        'span', {
                                            className: 'Legend--label'
                                        },
                                        label
                                )
                        );
                    })
            );
        }
    });

    var Charts = React.createClass({
        displayName: 'Charts',

        render: function render() {
            var self = this,
                    data = this.props.data,
                    layered = this.props.grouping === 'layered' ? true : false,
                    stacked = this.props.grouping === 'stacked' ? true : false,
                    opaque = this.props.opaque,
                    max = 0;

            for (var i = data.length; i--;) {
                for (var j = data[i].length; j--;) {
                    if (data[i][j] > max) {
                        max = data[i][j];
                    }
                }
            }

            return React.createElement(
                    'div', {
                        className: 'Charts' + (this.props.horizontal ? ' horizontal' : '')
                    },
                    data.map(function(serie, serieIndex) {
                        var sortedSerie = serie.slice(0),
                                sum;

                        sum = serie.reduce(function(carry, current) {
                            return carry + current;
                        }, 0);
                        sortedSerie.sort(compareNumbers);

                        return React.createElement(
                                'div', {
                                    className: 'Charts--serie ' + self.props.grouping,
                                    key: serieIndex,
                                    style: {
                                        height: self.props.height ? self.props.height : 'auto'
                                    }
                                },
                                React.createElement(
                                        'label',
                                        null,
                                        self.props.labels[serieIndex]
                                ),
                                serie.map(function(item, itemIndex) {
                                    var color = self.props.colors[itemIndex],
                                            style,
                                            size = item / (stacked ? sum : max) * 100;

                                    style = {
                                        backgroundColor: color,
                                        opacity: opaque ? 1 : item / max + 0.05,
                                        zIndex: item
                                    };

                                    if (self.props.horizontal) {
                                        style['width'] = size + '%';
                                    } else {
                                        style['height'] = size + '%';
                                    }

                                    if (layered && !self.props.horizontal) {
                                        style['right'] = sortedSerie.indexOf(item) / (serie.length + 1) * 100 + '%';
                                    }

                                    return React.createElement(
                                            'div', {
                                                className: 'Charts--item ' + self.props.grouping,
                                                style: style,
                                                key: itemIndex
                                            },
                                            React.createElement(
                                                    'b', {
                                                        style: {
                                                            color: color
                                                        }
                                                    },
                                                    item
                                            )
                                    );
                                })
                        );
                    })
            );
        }
    });

    React.render(React.createElement(App, null), document.getElementById('charts'));

    //console.log(sortedSerie, serie, sortedSerie.indexOf(item));
    // style['left'] = (itemIndex * 10) + '%';
</script>